<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!--
  Python Tutor: https://github.com/pgbovine/OnlinePythonTutor/
  Copyright (C) Philip Guo (philip@pgbovine.net)
  LICENSE: https://github.com/pgbovine/OnlinePythonTutor/blob/master/LICENSE.txt
-->

<head>
  <title>JavaScript Tutor - Visualize JavaScript code execution to learn JavaScript online</title>

  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

<script type="text/javascript">
window.optOverride = {}
window.optOverride.frontendLang = 'js'; // hacky override before including visualize.bundle.js
</script>

  <!-- let Webpack take care of everything. Use the [hash] feature to
       create unique filenames for releases:
       https://webpack.github.io/docs/long-term-caching.html -->
  <script type="text/javascript" src="build/visualize.bundle.js?1e7343ab4f" charset="utf-8"></script>

<!-- insert google-analytics.txt contents here -->

</head>

<body>

<table id="experimentalHeader">
<tr>
<td valign="top" id="headerTdLeft"></td>
<td valign="top" id="headerTdRight">

<div id="surveyHeader"></div>

<div id="optHeader" style="font-family: Georgia, Palatino, Times, serif; font-size: 13pt; margin-bottom: 16px; margin-left: 16px;">
JavaScript Tutor - Visualize JavaScript code execution to learn JavaScript online

<span style="font-size: 10pt";>
(also visualize
<a href="visualize.html#py=2">Python2</a>,
<a href="visualize.html#py=3">Python3</a>,
<a href="java.html">Java</a>,
<a href="javascript.html">JavaScript</a>,
<a href="typescript.html">TypeScript</a>,
<a href="ruby.html">Ruby</a>,
<a href="c.html">C</a>,
and
<a href="cpp.html">C++</a>
code)
</span>

</div>

</td>
</tr>
</table>


<div id="pyInputPane">

<div id="codeInputWarnings">Write code in

  <select id="pythonVersionSelector">
    <option value="js">JavaScript ES6</option>
  </select>

</div>

<div id="someoneIsTypingDiv" style="color: #e93f34; font-weight: bold; display: none;">Someone is typing ...</div>

<div id="codeInputPane"></div> <!-- populate with Ace code editor instance -->
<div id="frontendErrorOutput"></div>
<div id="surveyPane"></div>

<p>
<button id="executeBtn" class="bigBtn" type="button">Visualize Execution</button>
<button style="margin-left: 20px;" id="liveModeBtn" class="bigBtn" type="button">Live Programming Mode</button>
</p>

<div id="instructionsPane"></div>

<div id="exampleSnippets"></div>

</div>

<div id="pyOutputPane"></div>

<div id="footer"></div>

</body>
</html>
